<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美丽说</title>
<link rel="shortcut icon" href="images/copylogo.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/cart.css">
<link rel="stylesheet" href="css/foot.css">
</head>

<body>
<div id="header">
	<!-- 头部  -->
	<div class="header_con">
    	<div class="header">
    		<div class="welcome fl"><a href="/user/index.html">美丽说首页</a></div>
    	</div>
    </div>
    
     <!-- 搜素框 -->
     <div class="search_bar clearfix">
 		<a href="/user/index.html" class="logo fl"><img src="images/idid_ifrtgzddgm3dmnjshezdambqhayde_49x48.png"><h5>美丽说</h5></a>
 		<div class="search_con fl">
        	<form>
                <input type="text" class="input_text fl" name="key_words" placeholder="搜索商品"/>
                <input type="submit" class="input_btn fr"  value="搜索"/>
            </form>
        </div>
 		<div class="guest_cart fr">
        	<a href="front/cart.html" class="cart_name fl" target="_blank">我的购物车</a>
            <div class="goods_count fl" id="show_count" v-html="Object.keys(carts).length"></div>
        </div>
     </div>
</div>
<div id="app">
    <!-- 购物车 -->
    <div class="cart_con">
    	<h2 class="total_count">全部商品<em>3</em>件</h2>
    	<div class="cart_list_th clearfix">
        	<ul>
            	<li class="col01">商品名称</li>
            	<li class="col02">商品单位</li>
                <li class="col03">商品价格(元)</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
        </div>
    	<div class="cart_list_td clearfix" id="cart_list">
            <ul v-for="(item, index) in carts">
        		<li class="col01"><input type="checkbox" checked @click="changeCheck($event, item)"></li>
            	<li class="col02"><img :src="item.pics"></li>
                <li class="col03">{{item.pname}}<br><em>{{item.price}}元/{{item.unit}}</em></li>
                <li class="col04">{{item.unit}}</li>
                <li class="col05">{{(item.price).toFixed(2)}}元</li>
                <li class="col06">
                	<div class="num_add">
                    	<a href="javascript:void(0)" class="minus fl" @click="addCount(item, -1)">-</a>
                        <input type="text" :value="item.num" class="num_show fl">
                        <a href="javascript:void(0)" class="add fl" @click="addCount(item, 1)">+</a>
                    </div>
                </li>
                <li class="col07" v-html="(item.num * item.price).toFixed(2)"></li>
                <li class="col08"><a href="javascript: void(0);" @click="dels(item.bid, index)">删除</a></li>
            </ul>
        </div>
    	<div class="setElements">
        	<ul>
            	<li class="col01"><input type="checkbox" checked id="all"></li>
            	<li class="col02"><label for="all">全选</label></li>
                <li class="col03">合计(不含运费)：<span>&yen;</span><em id="totalPrices">{{totalPrice}}</em>
                <br>共计<b id="totalNumbers">{{totalCount}}</b>件商品</li>
                <li class="col04"><a href="javascript:void(0)" @click="gotoPay">去结算</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 版权所有 -->
<div class="footer">
	<div class="foot_link">
		<a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我么</a> <span> | </span>
        <a href="#">招聘人才</a> <span> | </span>
        <a href="#">友情链接</a> 
	</div>
	<p>CcpyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号</p>
</div>
   
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript">
let app = new Vue({
	el:"#app",
	data:{
		carts:[],
		totalCount: 0,
		totalPrice: 0
	},
	mounted: function(){
		axios.get("/product/cart/findList").then(rt =>{
			if(rt.status == 200){
				if(rt.data.code == 200){
						this.carts = rt.data.data;
						this.carts.forEach((item, index) =>{
							this.totalCount += item.num;
							this.totalPrice +=item.num * Number(item.price);
							item.status = 1;
						})
						console.log(this.carts,"this.carts");
						this.totalPrice = parseFloat(this.totalPrice.toFixed(2));
						this.$nextTick(function() {
							bindEvent();
						})
						return;
				}
				this.carts = [];
				
				if(rt.data.code == 512){
					showmsg("请先登录...","yellow", function(){location.href="/user/login.html?/product/cart.html"});
					return;
				}
				
				/**if(rt.data.code == 600){
					showmsg("购物车空空如也,马上去选购吧.....","blue", function(){location.href="index.html"});
					return;
				}**/
			}
			
		})
	},
	methods: {
		addCount: function(item, num){
			if(num == -1 && item.num == 1){
				return;
			}
			
			item.num += num;
			this.addCart(item.bid, num);
		},
		addCart: function(bid, num){
			axios.post("/product/cart/add",qs.stringify({bid:bid, num:num})).then(rt =>{
				if(rt.status ==200){
					if(rt.data.code ==512){
						showmsg("请先登录.....","yellow", function(){location.href="/user/login.html?/product/cart.html"});
						return;
					}
					
					if(rt.data.code == 200){
						this.getTotal();
						return;
					}
				}
				showmsg("修改失败,请稍后重试.....","red");
			})
		},
		getTotal: function(){
			this.totalCount = 0;
			this.totalPrice = 0;
			this.carts.forEach((item, index) =>{
				if(item.status == 1){
					this.totalCount += item.num;
					this.totalPrice += item.num * Number(item.price);
				}
			})
			this.totalPrice = parseFloat(this.totalPrice.toFixed(2));
		},
		checkAll: function(flag){
			flag = flag ? 1 : 0;
			this.carts.forEach((item, index) =>{
				item.status = flag;
			})
			this.getTotal();
		},
		changeCheck: function(that, item){
			if(that.target.checked){//说明是选中的
				item.status = 1;
				let checkboxs = $("#cart_list .col01>input[type='checkbox']");
				for (let i = 0,len = checkboxs.length; i < len; ++ i){
					if(!checkboxs[i].checked){
						$("#all").prop('checked',false);
						this.getTotal();
						return;
					}
				}
				$("#all").prop("checked",true);
			}else{
				item.status = 0;
				$("#all").prop("checked",false);
			}
			this.getTotal();
		},
		dels: function(bid, idx){
			if(confirm("数据一旦删除就不能恢复，您确定要删除商品吗?")){
				axios.post("/product/cart/del",qs.stringify({bid: bid})).then(rt =>{
					if(rt.status == 200 && rt.data.code ==200){
						this.carts.splice(idx, 1);
						this.getTotal();
						header.findCart();
						return;
					}
					showmsg("购物车信息是删除失败...","red");
				})
			}
		},
		gotoPay: function(){
			let pnos = [];
			this.carts.forEach((item,index) =>{
				if(item.status == 1){
					pnos.push(item.bid);
				}
			})
			
			if(pnos.length <= 0){
				showmsg("请选择您要结算的商品...","red");
				return;
			}
			
			localStorage.setItem("pnos", pnos);
			showmsg("跳转的支付界面.....","yellow", function(){location.href="/product/pay.html"});
		}
	},
	created(){
		axios.post("/user/member/checklogin",null).then(rt=>{
			if(rt.data.code == 200){
				return;
			}
			if(rt.data.code == 511){
				confirm(rt.data.message);
				location.href="/user/login.html?/user/cart.html";
			}
		})
	}
})

function bindEvent(){
	$("#all").click(function(){
		let flag = $(this).prop("checked");
		$("#cart_list .col01>input").prop("checked",flag);//prop -> properties
		app.checkAll(flag);
	})
}
</script>
</body>
</html>

